import React from 'react';
import {StyleSheet, Text, Dimensions,View,ScrollView,Image,TouchableOpacity} from 'react-native';
const {width, height} = Dimensions.get('window');
export default class CountDown extends  React.Component{
    constructor(props) {
        super(props);
        this.state={
            dateTime:[24*60*60*1000,60*60*1000,60*1000],
            lDay:0,
            lHour:0,
            lMin:0,
            lSec:0,
            isEnd:false
        }
        this.timer=null;
    }

    render(){

        return (
            <View style={styles.counted}>
                {this.renderCounted()}
            </View>
        )
    }
    checkTime(d){
        d=parseInt(d);
        d= d<10 ? ('0'+d ):d;
        return d;
    }
    countedDown(){
        let timeArr=this.state.dateTime, endTime=new Date(this.props.endTime),
            now=new Date(), leftTime=endTime.getTime()-now.getTime(),vm=this;
        this.setState({isEnd:leftTime<=0});
        this.setState({lDay:vm.checkTime(leftTime/timeArr[0])});
        this.setState({lHour:vm.checkTime((leftTime/timeArr[1])%24)});
        this.setState({lMin:vm.checkTime((leftTime/timeArr[2])%60)});
        this.setState({lSec:vm.checkTime((leftTime/1000)%60)});
    }
    setCountDown(){
        const vm=this;
        this.timer=setInterval(() => vm.countedDown(),1000)
    }
    stopCountDown(){
        const vm=this;
        clearInterval(vm.timer)
    }
    componentDidMount(){
        this.setCountDown();
    }
    componentWillUnmount() {
        this.stopCountDown();
    }
    renderCounted(){
        return(
            <View>
                {
                    this.state.isEnd ? (<Text>活动已经结束</Text>):(
                        <TouchableOpacity style={styles.countWrapper}>
                            <Text style={{marginRight:5}}>现实抢购:距离抢购</Text>
                            <View style={styles.countedIcon}>
                                <Text style={styles.countedColor}>{this.state.lDay}</Text>
                                <Text>天</Text>
                            </View>
                            <View style={styles.countedIcon}>
                                <Text style={styles.countedColor}>{this.state.lHour}</Text>
                                <Text>时</Text>
                             </View>
                            <View style={styles.countedIcon}>
                                <Text style={styles.countedColor}>{this.state.lMin}</Text>
                                <Text>分</Text>
                            </View>
                            <View style={styles.countedIcon}>
                                <Text style={styles.countedColor}>{this.state.lSec}</Text>
                                <Text>秒</Text>
                            </View>
                        </TouchableOpacity>
                    )
                }
            </View>
        )
    }

}
const styles=StyleSheet.create({
    counted:{

    },
    countWrapper:{
        flexDirection:"row",
        justifyContent:"flex-start",
        alignItems:"center"
    },
    countedIcon:{
        flexDirection:"row",
        justifyContent:"flex-start",
        alignItems:"center",
        marginRight:5
    },
    countedColor:{
        marginRight:5,
        paddingHorizontal:4,
        backgroundColor:"#F60",
        borderRadius:3,
        color:"#FFF"
    }
})
